@include('admin::form.error')
<div class="modal fade belongsto in" id="modal-selector-material_list" tabindex="-1" role="dialog" aria-hidden="false" style="display:hidden; padding-right: 17px;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="border-radius: 5px;">
            <div class="modal-body"><div class="box grid-box">
                    <div class="box-header with-border" style="display: none;">
                        <div class="pull-right">
                        </div>
                        <div class="pull-left">
                            <div class="btn-group" style="margin-right: 5px" data-toggle="buttons">
                                <label class="btn btn-sm btn-dropbox 60fbf0dba8348-filter-btn active" title="筛选">
                                    <input type="checkbox"><i class="fa fa-filter"></i><span class="hidden-xs">&nbsp;&nbsp;筛选</span>
                                </label>

                            </div>
                        </div>
                    </div>

                    <div class="box-header with-border  filter-box" id="filter-box">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="box-body">
                                    <div class="fields-group">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">产品编码	</label>
                                            <div class="col-sm-4">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-addon">
                                                        <i class="fa fa-pencil"></i>
                                                    </div>
                                                    <input type="text" class="form-control id" placeholder="产品编码" id="seacher_goods_code" name="seacher_goods_code" value="">
                                                </div>
                                            </div>
                                            <label class="col-sm-2 control-label">产品名称</label>
                                            <div class="col-sm-4">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-addon">
                                                        <i class="fa fa-pencil"></i>
                                                    </div>
                                                    <input type="text" class="form-control material_name" placeholder="产品名称" id="seacher_goods_name" name="seacher_goods_name" value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <div class="btn-group pull-left">
                                            <button type="button" class="btn btn-info submit" id="table_search"><i class="fa fa-search"></i>&nbsp;&nbsp;搜索</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{--<!-- /.box-header -->--}}
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover grid-table" id="grid-table60fbf0db9d452">
                            <thead>
                            <tr>
                                <th class="column-__modal_selector__"> </th>
                                <th class="column-goods_code">产品编码</th>
                                <th class="column-goods_type">产品分类</th>
                                <th class="column-goods_name">产品名称</th>
                                <th class="column-goods_size">尺寸</th>
                                <th class="column-goods_cases_number">	装箱数</th>
                                <th class="column-goods_unit">单位</th>
                                <th class="column-goods_supply_price">供货价</th>
                                <th class="column-material_alias_one">零售价</th>
                                <th class="column-updated_at">货物摆放位置</th>
                                <th class="column-stock">库存</th>
                                <th class="column-stock">安全库存	</th>
                                <th class="column-__remove__"> </th>
                            </tr>
                            </thead>
                            <tbody id="material_list_data">

                            </tbody>
                        </table>

                    </div>

                    <div class="box-footer clearfix">
                        总共 <b id="material_count">2</b> 条
                        <ul class="pagination pagination-sm no-margin pull-right" id="pages"></ul>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="cancel" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary submit" id="select_sub">提交</button>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-12">
    <select class="form-control material_list hide" style="width: 100%;" name="goods_list[]" multiple="" data-placeholder="输入">
    </select>
    <input type="hidden" name="material_list[]">

    <div class="belongstomany-material_list">
        <div class="box grid-box">

            <div class="box-header with-border">
                <div class="pull-right">
                </div>
                <div class="pull-left" id="xuanze">
                    <a href="javascript:void(0)" class="btn btn-primary btn-sm pull-left select-relation">
                        <i class="glyphicon glyphicon-folder-open"></i>
                        &nbsp;&nbsp;选择材料
                    </a>
                </div>
            </div>

            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover grid-table" id="grid-table60fbedd4ae08f">
                    <thead>
                    <tr>
                        <th class="column-material_code">材料编码</th>
                        <th class="column-material_name">材料名称</th>
                        <th class="column-material_img">材料分类</th>
                        <th class="column-material_img">供应商</th>
                        <th class="column-material_img">生产厂家</th>
                        <th class="column-material_img">品牌名称</th>
                        <th class="column-created_at">计量单位</th>
                        <th class="column-updated_at">别名</th>
                        <th class="column-updated_at">规格</th>
                        <th class="column-updated_at">库存</th>
                        <th class="column-updated_at">调出数量</th>
                        <th class="column-updated_at">备注</th>
                        <th class="column-__remove__">操作</th>
                    </tr>
                    </thead>
                    <tbody id="select_content">
                    <tr id="zaiwu">
                        <td colspan="12" class="empty-grid" style="padding: 100px;text-align: center;color: #999999">
                            <svg t="1562312016538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2076" width="100%" height="128" style="fill: #e9e9e9;">
                                <path d="M512.8 198.5c12.2 0 22-9.8 22-22v-90c0-12.2-9.8-22-22-22s-22 9.8-22 22v90c0 12.2 9.9 22 22 22zM307 247.8c8.6 8.6 22.5 8.6 31.1 0 8.6-8.6 8.6-22.5 0-31.1L274.5 153c-8.6-8.6-22.5-8.6-31.1 0-8.6 8.6-8.6 22.5 0 31.1l63.6 63.7zM683.9 247.8c8.6 8.6 22.5 8.6 31.1 0l63.6-63.6c8.6-8.6 8.6-22.5 0-31.1-8.6-8.6-22.5-8.6-31.1 0l-63.6 63.6c-8.6 8.6-8.6 22.5 0 31.1zM927 679.9l-53.9-234.2c-2.8-9.9-4.9-20-6.9-30.1-3.7-18.2-19.9-31.9-39.2-31.9H197c-19.9 0-36.4 14.5-39.5 33.5-1 6.3-2.2 12.5-3.9 18.7L97 679.9v239.6c0 22.1 17.9 40 40 40h750c22.1 0 40-17.9 40-40V679.9z m-315-40c0 55.2-44.8 100-100 100s-100-44.8-100-100H149.6l42.5-193.3c2.4-8.5 3.8-16.7 4.8-22.9h630c2.2 11 4.5 21.8 7.6 32.7l39.8 183.5H612z" p-id="2077"></path>
                            </svg>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>

    //点击选择按钮
    $("#xuanze").click(function(){
        var warehouse_id = $("select[name='warehouse_id']").val();
        if(warehouse_id == ""){
            layer.msg('请先选择所属仓库！');return false;
        }
        $("#modal-selector-material_list").show();

        table_search(0);

    });
    //点击提交
    $("#select_sub").click(function(){
        var str = "";
        $("input[name='id']:checked").each(function () {
            $(".material_key").parent().remove();
            var htmlcontent = $("#material_key"+this.value).html();
            str+='<tr class="diaobo'+this.value+'">';
            str+=htmlcontent;
            str+='<td><input type="text" id="material_number_list" style="width:150px;" name="material_number_list[]" class="form-control material_list material_number" placeholder="输入 数量"></td>';
            str+='<td><input type="text" name="material_remark_list[]" class="form-control" placeholder="备注"></td>';
            str+='<td class="column-__remove__"><button type="button" class="btn bg-orange btn-sm margin" style="margin-top: 2px;" onclick="allocation_remover('+this.value+')">移除</button></td>';
            str+='<td><input type="hidden" name="material_id_list[]" value="'+this.value+'"></td>';
            str+='</tr>';
        });
        $("#zaiwu").hide();
        $("#select_content").append(str);
        $("#modal-selector-material_list").hide();

    });

    //点击取消按钮
    $("#cancel").click(function(){
        $("#modal-selector-material_list").hide();
    })
    //搜索     .
    $("#table_search").click(function(){
        table_search(0);
    });

    //获取数据
    function table_search(page){

        var seacher_material_code = $("#seacher_material_code").val();

        var seacher_material_name = $("#seacher_material_name").val();

        var warehouse_id = $("select[name='warehouse_id']").val();

        $.ajax({
            type: 'get',
            async: false,
            url: "/admin/data/get/material/list",
            data: {seacher_material_code:seacher_material_code,seacher_material_name:seacher_material_name,warehouse_id:warehouse_id,type:2},
            dataType: 'json',
            success: function (data) {

                console.log(data);

                var str="";
                var material_list = data.material_list;

                for(var i=0;i<material_list.length;i++){
                    str+='<tr id="material_key'+material_list[i]['id']+'">';
                    str+='<td><input type="checkbox" class="material_key" name="id" value="'+material_list[i]['id']+'"></td>';
                    str+='<td class="column-material_code">'+material_list[i]['material_code']+'</td>';
                    str+='<td class="column-material_name">'+material_list[i]['material_name']+'</td>';
                    str+='<td class="column-material_category_name">'+material_list[i]['material_category_name']+'</td>';
                    str+='<td class="column-supplier_name">'+material_list[i]['supplier_name']+'</td>';
                    str+='<td class="column-manufacturer_name">'+material_list[i]['manufacturer_name']+'</td>';
                    str+='<td class="column-brand_name">'+material_list[i]['brand_name']+'</td>';
                    str+='<td class="column-unit_name">'+material_list[i]['unit_name']+'</td>';
                    str+='<td class="column-material_alias_one">'+material_list[i]['material_alias_one']+'</td>';
                    str+='<td class="column-specifications">'+material_list[i]['specifications']+'</td>';
                    str+='<td class="column-specifications">'+material_list[i]['stock']+'</td>';
                    str+='</tr>';
                }

                $("#material_list_data").html(str);

                var pages = data.pages;
                var page_str='<li class="page-item disabled"><span class="page-link">«</span></li>';
                for(var i=1;i<=pages;i++) {
                    if(i==data.select_page){
                        page_str+='<li class="page-item active" style="cursor:pointer"><span class="page-link">'+i+'</span></li>';
                    }else{
                        page_str+='<li class="page-item" style="cursor:pointer" value="'+i+'" onclick="allocation_page_search('+i+')"><span class="page_search page-link">'+i+'</span></li>';
                    }
                }
                page_str+='<li class="page-item disabled"><span class="page-link">»</span></li>';
                $("#pages").html(page_str);

                $("#material_count").html(data.count);
            }
        });
    }


</script>
